<template>
    <el-dialog 
        title="问卷预览" width="600px" class="preview-details-dialog"
        :visible.sync="visible"  :before-close="handleClose" :close-on-click-modal="false">
        <el-form :model="detail" ref="formRef">
            <div class="preview-wrapper">
                <div class="preview-title">{{ detail.title }}</div>
                <div class="preview-desc" v-html="detail.description"></div>
                <div class="preview-content" v-if="detail.questions">
                    <div 
                        class="preview-item" :id="`preview${activeIndex}`" 
                        v-for="row of [ detail.questions[activeIndex] ]" :key="row.question_id">
                        <el-form-item 
                            :required="row.is_required" 
                            :prop="`questions.${activeIndex}.answer`"
                            :rules="row.is_required ? (row.type < 3 || row.options[0] ? rules.select : rules.text) : rules.null">
                            <template slot="label">
                                <strong>{{ activeIndex + 1 }}. {{ row.title }}</strong>
                                <span class="item-type" v-if="row.type == 2">
                                    [{{ actionTypeJson[row.type].name }}]
                                </span>
                            </template>
                            <div class="preview-item__content">
                                <el-radio-group v-if="+row.type == 1" v-model="row.answer">
                                    <div class="item-radio" v-for="row2 of row.options" :key="row2.sort">
                                        <el-radio :label="row2.title" @click.native.prevent="handleChange(row, row2)">
                                            <span>{{ row2.title }}</span>
                                            <div v-if="row2.is_write">
                                                <el-input v-model="row2.write"></el-input>
                                            </div>
                                        </el-radio>
                                    </div>
                                </el-radio-group>
                                <el-checkbox-group v-else-if="+row.type == 2" v-model="row.answer">
                                    <div class="item-checkbox" v-for="row2 of row.options" :key="row2.sort">
                                        <el-checkbox :label="row2.title">
                                            {{ row2.title }}
                                            <div v-if="row2.is_write">
                                                <el-input v-model="row2.write"></el-input>
                                            </div>
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                                <template v-else-if="+row.type == 3">
                                    <template v-if="row.options.length <= 0">
                                        <el-input 
                                            v-if="+row.multi_rows == 1" type="textarea" :rows="5" maxlength="200" v-model="row.answer" show-word-limit>
                                        </el-input>
                                        <el-input v-else maxlength="120" v-model="row.answer"></el-input>
                                    </template>
                                    <template v-else>
                                        <div v-for="item of row.options">
                                            <area-select 
                                                v-if="item.type === 'area'" ref="areaRef" :deep="3" class="area-select-wrapper" 
                                                show-options @change="val => (row.answer = val)">
                                            </area-select>
                                            <el-date-picker 
                                                v-else-if="item.type === 'date'" type="date" placeholder="选择日期" v-model="row.answer">
                                            </el-date-picker>
                                            <template v-else-if="item.type === 'rate'">
                                                <div class="el-rate">
                                                    <span class="el-rate__item" v-for="text of item.texts">{{ text }}</span>
                                                </div>
                                                <el-rate v-model="row.answer" />
                                            </template>
                                        </div>
                                    </template>
                                </template>
                            </div>
                        </el-form-item>
                        <span v-if="row.options_jump" class="color-danger">备注：此题设有跳题逻辑</span>
                    </div>
                </div>
            </div>
        </el-form>
        <div slot="footer" v-if="detail.questions">
            <el-button 
                v-if="activeIndex > 0"
                type="primary" size="small" 
                @click="handleQuestion('prev')">
                上一题
            </el-button>
            <el-button 
                v-if="activeIndex < detail.questions.length - 1"
                type="primary" size="small" 
                @click="handleQuestion('next')">
                下一题
            </el-button>
            <el-button 
                v-else-if="activeIndex == detail.questions.length - 1" 
                type="primary" size="small" @click="handleSubmit">
                提 交
            </el-button>
            <!-- <el-button size="small" @click="handleCancel">取 消</el-button> -->
        </div>
    </el-dialog>
</template>
<script>
import { actionType } from './action_types.js'
import AreaSelect from '@/components/home/area.vue'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => ({})
        }
    },
    components: { AreaSelect },
    data() {
        return {
            detail: {},
            activeIndex: 0,         // 当前题号
            radioCancel: false,     // 支持单选框取消
            actionTypeJson: actionType(true),  // 问卷类型 - 对象形式
            rules: {
                text: [{ required: true, message: '请填写', trigger: ['blur', 'change'] }],
                select: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }]
            },
            tops: []
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.getData()
                }
            }
        }
    },
    methods: {
        getData() {
            const params = { questionnaire_id: this.data.questionnaire_id }
            this.$http.get(
                "/admin/yt_car/index.php?act=questionnaire&op=questionnaireInfo", 
                { params }
            ).then(res => {
                if (res.code == 1) {
                    res.data.questions.map(item => {
                        item.answer = item.type == 2 ? [] : ""
                        return item
                    })
                    this.detail = res.data
                } else {
                    throw res.msg
                }
            }).catch(error => {
                error && this.$message.error(`${error}`)
            })
        },
        handleChange(row, item) {
            const answer = item.title
            row.answer = (this.radioCancel || !row.is_required) && row.answer == answer ? '' : answer
            row.next = item.next || ''
        },
        handleClose() {
            this.detail = {}
            this.activeIndex = 0
            this.$emit("update:visible", false)
        },
        handleCancel() {
            this.handleClose()
        },
        handleQuestion(type = 'prev') {
            const row = this.detail.questions[this.activeIndex]
            if (type === 'next') {
                this.$refs.formRef.validate(valid => {
                    if (valid) {
                        let activeIndex = 0
                        if (row.options_jump && row.next && +row.next > 0) {
                            activeIndex = +row.next - 1
                        } else {
                            activeIndex = this.activeIndex + 1
                        }
                        this.detail.questions[activeIndex].prev = this.activeIndex
                        this.activeIndex = activeIndex
                    }
                })
            } else {
                this.activeIndex = row.prev
            }
        },
        handleSubmit() {
            this.$refs.formRef.validate(valid => {
                if (valid) {}
            })
        }
    }
}
</script>
<style lang="scss">
.preview-details-dialog {
    text-align: center;
    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
    ::-webkit-scrollbar { 
        width: 9px;
        height: 9px;
    }
    ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 9px;
    }
    .el-dialog {
        margin: auto!important;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        backface-visibility: hidden;
        text-align: left;
    }
    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 0;
        overflow: hidden auto;
        max-height: calc(80vh - 70px);
        box-sizing: border-box;
    }
    .preview-wrapper {
        width: 98%;
        margin: auto;
    }
    .preview-title {
        font-size: 22px;
        // font-weight: 700;
        color: #409EFF;
        text-align: center;
        margin-bottom: 18px;
    }
    .preview-desc {
        white-space: pre-line;
    }
    .preview-content {
        margin-top: 20px;
        border-top: 1px solid #DCDFE6;
        padding-top: 24px;
        .item-type {
            margin-left: 6px;
            color: #888888;
        }
    }
    .preview-item {
        .el-form-item__label {
            width: 100%;
            text-align: left;
            color: #333;
            display: block;
            float: none;
            line-height: 20px;
        }
        .el-form-item__content {
            width: 100%;
            margin-top: 12px;
            display: block;
        }
        .el-radio-group, .el-checkbox-group {
            width: 100%;
            color: #999;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            border-radius: 4px;
            overflow: hidden;
        }
        .item-radio, .item-checkbox {
            &:not(:last-child) {
                border-bottom: 1px solid #DCDFE6;
            }
        }
        .el-radio, .el-checkbox {
            width: 100%;
            display: block;
            padding: 10px 15px;
            box-sizing: border-box;
        }
        .el-radio__label {
            line-height: 18px;
            vertical-align: bottom;
            font-size: 13px;
            .el-input {
                padding: 8px 0 0 24px;
            }
        }
        .el-checkbox__label {
            display: inline;
            font-size: 13px;
            vertical-align: 1px;
            padding-left: 6px;
            .el-input {
                padding: 1px 0 4px 24px;
            }
        }
        .el-checkbox__input {
            line-height: 1.2;
        }
        /* 移除边框放射阴影 */
        .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .el-checkbox {
            padding: 6px 15px;
        }
        .el-input__inner {
            line-height: 32px;
            height: 32px;
        }
        .preview-item-child {
            font-size: 14px;
        }
        .el-select, .el-input {
            width: 100%;
        }
        .area-select-wrapper {
            .el-form {
                display: flex;
                .el-form-item {
                    flex: 1;
                    &:last-child {
                        margin-right: 0;
                    }
                    .el-form-item__content {
                        width: 100%;
                        margin-top: 0;
                    }
                    .el-select, .el-input {
                        width: 100%;
                    }
                }
            }
        }
        .el-rate {
            display: flex;
            height: 18px;
            .el-rate__item {
                flex: 1;
                text-align: center;
                font-size: 14px;
                line-height: 100%;
            }
            .el-rate__icon {
                margin-right: 0;
            }
        }
    }
    .el-dialog__footer {
        text-align: right;
        padding-right: 26px;
    }
}
</style>